<template>
  <v-content >
    <div class='topcategory'>
      <div class='mw-row-style' style='z-index:97;justify-content:center;background-color:#ffffff;height:0.44rem;width:3.75rem;align-items:center;position: fixed;top:0;'>
        <div v-for="(item,index) in data.topcategory">
          <div @click="data.changeCategory(item.id)" class='mw-column-style' style='width:0.55rem;height:0.44rem;align-items:center;justify-content: center'>
            <div class="mw-single-line" :class="[item.checked? 'mw-checked' : 'mw-unchecked']" style='z-index:1;width:0.5rem;text-align: center'>{{item.name}}</div>
            <div style="height:0.05rem;width:0.38rem;margin-top:-0.04rem" :style="{backgroundColor:item.checked? '#ffc421' : '#ffffff'}"></div>
          </div>
        </div>
      </div>
    </div>
    <v-miaoScroll :on-refresh="data.onRefresh" :on-getmore="data.onGetmore" :has-next="data.has_next" :showview="data.showview" v-vuet-scroll="{ path: 'fansfollowslist', name: 'content' }" style="background-color: #ffffff;margin-top:0.44rem;">
      <div class="mw-column-style">
        <div @click="data.skipToUserpage(item.id)" class="mw-row-spacebetween-style" style="width: 3.45rem;padding:0.15rem;align-items: center" v-for="(item,index) in data.list">
          <div class="mw-row-style" style="align-items: center">
            <img :src="item.avatar== ''? '/static/defalut_avatar.png':item.avatar" style="width:0.5rem;height:0.5rem;border-radius: 0.25rem;object-fit: cover;margin-right:0.1rem"/>
            <div class="mw-column-style" style="width: 2rem">
              <div class="mw-single-line mw-first-text-color" style="width:100%;font-size:0.15rem;margin-bottom:0.04rem;">{{item.name}}</div>
              <div class="mw-single-line mw-third-text-color" style="width:100%;font-size:0.13rem;">{{item.introduce}}</div>
            </div>
          </div>
          <div @click.stop="data.follow(item.id)" v-if="item.followed == 1" class="mw-focus-button-style">已关注</div>
          <div @click.stop="data.follow(item.id)" v-else-if="item.followed == 0" class="mw-unfocus-button-style">关注</div>
          <div @click.stop="data.follow(item.id)" v-else-if="item.followed == 2" class="mw-focuseach-button-style">互相关注</div>
        </div>
      </div>
    </v-miaoScroll>
  </v-content>


</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({data: 'fansfollowslist'}),
      mapRules({store: [{ path: 'fansfollowslist' }],need: [{ path: 'fansfollowslist' }]}),
    ],
    components: {

    },
    data() {
      return {

      }
    },
    methods: {

    },

    created() {

    },

    mounted() {
      this.data.needFetch = true
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .topcategory {
    z-index:99;position:fixed;top:0;width:3.75rem;overflow-x: scroll;background-color:#ffffff;height:0.44rem;
    background:rgba(255,255,255,1);
    box-shadow:0px 6px 10px 0px rgba(0,0,0,0.04);
  }
  .topcategory::-webkit-scrollbar {
    display: none;
  }
  .mw-checked {
    color:#333333;
    font-weight: bold;
    font-size: 0.13rem;
    line-height: 1.5;
  }
  .mw-unchecked {
    color:#999999;
    font-size: 0.13rem;
    line-height: 1.5;
  }

</style>
